<template>
  <div>
    <el-card>
      <el-form :inline="true" :model="searchInfo" ref="searchInfo">
        <el-form-item label="企业名称:" prop="enterpriseName">
          <el-input ref="enterpriseName" v-model="searchInfo.enterpriseName"
                    @keyup.enter.native="$refs['agentName'].focus()" clearable></el-input>
        </el-form-item>
        <el-form-item label="所属分公司:" prop="agentName">
          <el-input ref="agentName" v-model="searchInfo.agentName"
                    @keyup.enter.native="$refs['salesmanName'].focus()" clearable></el-input>
        </el-form-item>
        <el-form-item label="对接业务员:" prop="salesmanName">
          <el-input ref="salesmanName" v-model="searchInfo.salesmanName"
                    @keyup.enter.native="onSearch" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">搜索</el-button>
          <el-button type="info" @click="resetForm('searchInfo')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="jxf-table-card mt20">
      <div slot="header">
        <span>数据列表</span>
        <el-button type="primary" @click="exportInfo" :loading="exportLoading">导出</el-button>
      </div>
      <jxf-table :table="tableInfo">
        <template slot="star" slot-scope="scope">
          <el-row type="flex" vertical="start">
            <el-col style="width: auto">
              <el-rate v-model="scope.row.star" disabled text-color="#ff9900" score-template="{value}"></el-rate>
            </el-col>
            <el-col style="width: auto">{{scope.row.score}}分</el-col>
          </el-row>
        </template>
        <template slot="operation" slot-scope="scope">
          <el-button type="text" @click="showDetail(scope.row)">查看编辑</el-button>
        </template>
      </jxf-table>
    </el-card>
    <jxf-pagination :pageTotal="pageTotal" :currentPage.sync='currentPage' :pageSize.sync="pageSize"
                    @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange"></jxf-pagination>
  </div>
</template>

<script>
  export default {
    name: "MerchantStartManagement",
    props:{
    },
    data() {
      return {
        searchInfoBack: {
          enterpriseName: "",
          agentName:"",
          salesmanName:""
        },
        searchInfo: {
          enterpriseName: "",
          agentName:"",
          salesmanName:""
        },
        tableInfo: {},
        pageTotal: 0,
        pageSize: 10,
        currentPage: 1,
        exportLoading:false
      }
    },
    methods: {
      // 表单初始化
      initTableInfo() {
        this.tableInfo = {
          border: true,
          loading: false,
          tr: [
            {
              id: '1',
              label: '企业名称',
              prop: 'enterpriseName'
            },
            {
              id: '3',
              label: '所属分公司',
              minWidth: "100",
              prop: 'agentName'
            },
            {
              id: '4',
              label: '对接业务员',
              minWidth: "100",
              prop: 'salesManName'
            },
            {
              id: '5',
              label: '星级评分',
              prop: 'star',
              show:"template",
              width:"180"
            },
            {
              id: '6',
              label: '操作',
              show: 'template',
              prop: 'operation',
              width: "100",
              fixed: "right"
            }
          ],
          data: []
        }
      },
      // 获取列表
      getList() {
        let info = formatData.clearObjEmptyPrama({...this.searchInfo,pageSize: this.pageSize, pageNum: this.currentPage})
        ajax.post(apis.factory.merchantList, info)
          .then(res => {
            if(res.success === true ){
              this.pageTotal = res.data.total
              if (res.data.dataList !== [] && res.data.dataList !== null) {
                this.tableInfo.data = this.formatData(res.data.dataList)
              }else{
                this.tableInfo.data = []
              }
            }
          })
      },
      // 数据处理
      formatData(list) {
        return list.map(item => {
          return {
            facUserId: item.facUserId,
            enterpriseName: item.enterpriseName,
            agentName: item.agentName,
            salesManName: item.salesManName,
            star: item.star,
            score: item.score
          }
        })
      },
      showDetail(row){
        this.$emit("showDetail", {userType:1,facUserId:row.facUserId})
      },
      // 导出
      exportInfo(){
        this.exportLoading = true
        let info = formatData.clearObjEmptyPrama({...this.searchInfo, pageSize: this.pageSize, pageNum: this.currentPage})
        ajax.export(apis.factory.exportmerchantList, info)
          .then(res => {
            this.exportLoading = false
          })
      },
      // 搜索
      onSearch() {
        this.currentPage = 1
        this.getList()
      },
      // 搜索表单重置
      resetForm(formName) {
        // this.$refs[formName].resetFields();
        this.searchInfo = {...this.searchInfoBack}
      },
      // 切换页面
      currentPageChange(pageNo) {
        this.currentPage = pageNo
        this.getList()
      },
      // 切换页面条数
      pageSizeChange(pageNo) {
        this.pageSize = pageNo
        this.getList()
      },
      // 刷新页面
      refreshPage() {
        this.currentPage = 1
        this.pageSize = 10
        this.searchInfo = {...this.searchInfoBack}
        this.getList()
      }
    },
    created() {
      this.initTableInfo()
      this.getList()
    }
  }
</script>

<style lang="scss" scoped>

</style>
